<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ShipownerAdd, ShipownerEdit, ShipownerShow } from "@/http/api";
import upMoreImg from "@/components/public/upMoreImg.vue";

export default {
  components: { outMain, upMoreImg },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkIntNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIntNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      detailId: this.$route.query.id,
      showCont: false,
      formData: {
        shipowner_name: "",
        shipowner_person: "",
        shipowner_mobile: "",
        account_money: "",
        shipowner_ktsc: "",
        shipowner_remark: "",
        sub_account: [],
        shipowner_file: "",
      },
      rules: {
        shipowner_name: [
          {
            required: true,
            message: "船东名称不能为空",
            trigger: "blur",
            min: 2,
            max: 20,
          },
        ],
        shipowner_person: [
          {
            required: true,
            message: "负责人不能为空",
            trigger: "blur",
            min: 2,
            max: 10,
          },
        ],
        shipowner_mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        account_money: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        shipowner_ktsc: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    addAccount() {
      this.formData.sub_account.push({ person: "", mobile: "" });
    },
    delAccountFn(index) {
      this.formData.sub_account.splice(index, 1);
    },
    getImg(url) {
      this.formData.shipowner_file = url;
    },
    async saveFn() {
      for (let item of this.formData.sub_account) {
        console.log(item);
        if (item.person == "") {
          ElMessage({
            type: "error",
            message: "负责人不能为空(子账号)",
          });
        } else if (this.$ruleCheck.checkPhone(item.mobile)) {
          ElMessage({
            type: "error",
            message: this.$ruleCheck.checkPhone(item.mobile) + "(子账号)",
          });
        }
      }
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const { data } = this.detailId
        ? await ShipownerEdit(this.formData)
        : await ShipownerAdd(this.formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      ShipownerShow({ shipowner_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.formData["shipowner_id"] = this.detailId;
          this.formData["account_money"] = parseInt(
            this.formData.account_money
          );
          this.showCont = true;
        }
      });
    },
  },
  mounted() {},
  created() {
    if (this.detailId) {
      this.getData();
    } else {
      this.showCont = true;
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>{{ detailId ? "编辑" : "新增" }}船东账号</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" ref="ruleForm" :model="formData">
          <div class="flexCont" v-if="showCont">
            <el-form-item
              label="船东公司"
              label-width="120"
              prop="shipowner_name"
            >
              <el-input
                clearable
                placeholder="请输入船东公司"
                v-model="formData.shipowner_name"
              />
            </el-form-item>
            <el-form-item
              label="负责人"
              label-width="120"
              prop="shipowner_person"
            >
              <el-input
                clearable
                placeholder="请输入负责人"
                v-model="formData.shipowner_person"
              />
            </el-form-item>
            <el-form-item
              label="手机号"
              label-width="120"
              prop="shipowner_mobile"
            >
              <el-input
                clearable
                placeholder="请输入手机号"
                v-model="formData.shipowner_mobile"
              />
            </el-form-item>
            <el-form-item
              label="开户费用"
              v-if="!detailId"
              label-width="120"
              prop="account_money"
            >
              <el-input
                clearable
                placeholder="请输入开户费用"
                v-model="formData.account_money"
                ><template #append>元</template></el-input
              >
            </el-form-item>
            <el-form-item
              label="开通时长"
              v-if="!detailId"
              label-width="120"
              prop="shipowner_ktsc"
            >
              <el-input
                clearable
                placeholder="请输入开通时长"
                v-model="formData.shipowner_ktsc"
                ><template #append>月</template></el-input
              >
            </el-form-item>
            <el-form-item
              label="系统子账号"
              class="flexPull"
              label-width="120"
              prop="fleet_watercraft"
            >
              <div class="addBootItem">
                <btn value="新增账号" @ok="addAccount"></btn>
              </div>
              <div class="customCont">
                <div
                  class="customItem flexPull"
                  :key="index"
                  v-for="(item, index) in formData.sub_account"
                >
                  <div class="customTd">
                    <el-input
                      clearable
                      placeholder="负责人"
                      v-model="item.person"
                    />
                  </div>
                  <div class="customTd">
                    <el-input
                      clearable
                      placeholder="手机号"
                      v-model="item.mobile"
                    />
                  </div>
                  <btnPlain
                    value="删除此账号"
                    @ok="delAccountFn(index)"
                  ></btnPlain>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              class="flexPull"
              label="备注信息"
              label-width="120"
              prop="userName"
            >
              <el-input
                v-model="formData.shipowner_remark"
                maxlength="3000"
                placeholder="请输入备注信息"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              class="flexPull"
              label="附件"
              label-width="120"
              prop="shipowner_file"
            >
              <upMoreImg
                :propImgs="formData.shipowner_file"
                @ok="getImg"
              ></upMoreImg>
            </el-form-item>
            <el-form-item class="flexPull" label=" " label-width="120">
              <btn
                :value="detailId ? '确认编辑' : '确认新增'"
                @ok="saveFn"
              ></btn>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
